<template>
    <div class="hello">
        <!-- vue图片和背景图示例 -->
        <!-- <img src="../../public/images/test.png" alt="" />
        <img src="@/assets/icon/test.png" alt="" /> -->
        <!-- <div class="icon icon1"></div> -->
        <!-- <div class="icon icon2"></div> -->

        <!-- 虚拟滚动 -->
        <XuNiGunDong />
    </div>
</template>

<script>
import XuNiGunDong from "./demo/XuNiGunDong/index.vue"
export default {
    name: "HelloWorld",
    components: {
        XuNiGunDong,
    },
    props: {
        msg: String,
    },
    mounted() {
        this.$nextTick(() => {
            console.log(this.$el.clientHeight, 444)
        })
    },
}
</script>

<style scoped lang="scss">
@import "@/assets/styles/index.scss";
.hello {
    h1 {
        color: $primary-color;
    }
}
.icon {
    width: 100px;
    height: 100px;
    background-size: cover;
}
.icon1 {
    /* 背景图地址带不带引号都可以 可以用绝对地址，也可以用别名地址 */
    background-image: url("@public/images/test.png");
    /* background-image: url("../../public/images/test.png"); */
}
/* .icon2 {
    background-image: url(@/assets/icon/test.png);
} */
</style>
